<template>
  <!-- 轮播横幅 -->
  <div class="w-full bg-black text-white py-6">
    <div class="mx-auto">
      <!-- Swiper 容器 -->
      <div class="swiper announcement-swiper">
        <div class="swiper-wrapper">
          <!-- 第一个横幅 -->
          <div class="swiper-slide">
            <div class="flex flex-col w-full px-8 md:px-16 lg:px-24 !py-2">
              <div class="!mb-2">
                <span class="text-lg md:text-xl font-medium">国内大语言模型测试报告：</span>
              </div>
              <div class="!mb-2">
                <span class="text-lg md:text-xl text-gray-300">通义千问脱颖而出</span>
              </div>
              <div class="flex justify-start md:justify-end">
                <button
                  class="w-full md:w-auto px-6 py-2 bg-blue-600 text-white text-sm rounded-full hover:bg-blue-700 transition-colors whitespace-nowrap">
                  了解更多
                </button>
              </div>
            </div>
          </div>

          <!-- 第二个横幅 -->
          <div class="swiper-slide">
            <div class="flex flex-col w-full px-8 md:px-16 lg:px-24 !py-2">
              <div class="!mb-2">
                <span class="text-lg md:text-xl font-medium">国内大语言模型测试报告：</span>
              </div>
              <div class="!mb-2">
                <span class="text-lg md:text-xl text-gray-300">通义千问脱颖而出</span>
              </div>
              <div class="flex justify-start md:justify-end">
                <button
                  class="w-full md:w-auto px-6 py-2 bg-blue-600 text-white text-sm rounded-full hover:bg-blue-700 transition-colors whitespace-nowrap">
                  了解更多
                </button>
              </div>
            </div>
          </div>

        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { onMounted, onUnmounted } from 'vue'
import Swiper from 'swiper'
import 'swiper/css'

let swiper = null

// 初始化 Swiper
onMounted(() => {
  swiper = new Swiper('.announcement-swiper', {
    // 基础配置
    slidesPerView: 1,        // 同时显示的slide数量，1表示一次只显示一个
    spaceBetween: 0,         // slide之间的间距（像素）
    loop: true,              // 启用无限循环模式，最后一个slide后会回到第一个
    grabCursor: true,        // 鼠标悬停时显示抓手光标
  })
})

// 清理 Swiper 实例
onUnmounted(() => {
  if (swiper) {
    swiper.destroy(true, true)
  }
})
</script>

<style scoped>
/* Swiper 容器样式 */
.announcement-swiper {
  width: 100%;
  height: auto;
}

/* Swiper 滑块样式 */
.announcement-swiper .swiper-slide {
  display: flex;
  /* 移除 align-items: center 以允许自定义布局 */
  justify-content: center;
  min-height: 120px;
  /* 增加最小高度以适应新的间距 */
}

/* 按钮样式优化 */
button {
  user-select: none;
  pointer-events: auto;
}

/* 禁用文本选择 */
.announcement-swiper {
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}

/* 确保slide内容布局正确 */
.announcement-swiper .swiper-slide>div {
  width: 100%;
  min-height: 120px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  /* 关键：让内容从顶部开始，不压缩间距 */
}
</style>
